/*
  1. 新版本 WillMount, WillReceiveProps, componentWillUpdate 钩子 都需要加 UNSAFE_(除了WillUnmount) 
  —— 理由: 异步渲染, API 经常被误解和滥用, 启用异步渲染之后可能出现 bug
*/
/* 
  新版生命周期 

  区别在于：废弃3个钩子, 新增2个: getDerivedStateFromProps,  getSnapshotBeforeUpdate！！！

  1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
          1.	constructor()
          2.	getDerivedStateFromProps 
          3.	render()
          4.	componentDidMount() =====> 常用
                一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
  2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
          1.	getDerivedStateFromProps
          2.	shouldComponentUpdate()
          3.	render()
          4.	getSnapshotBeforeUpdate
          5.	componentDidUpdate()
  3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
          1.	componentWillUnmount()  =====> 常用
                一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
*/
import React, { Component } from 'react'
import { unmountComponentAtNode } from 'react-dom/cjs/react-dom.development';
import './index.css'

export class Count extends Component {

  // 构造器
  constructor(props) {
    console.log('Count---constructor~~~(新)');
    super(props)
    // 初始化状态
    this.state = { count: 0 }
  }

  // 加1按钮的回调
  add = () => {
    // 获取原状态
    const { count } = this.state
    // 更新状态
    this.setState({ count: count + 1 })
  }

  // 卸载组件按钮的回调
  death = () => {
    unmountComponentAtNode(document.getElementById('root'))
  }

  // 强制更新按钮的回调
  force = () => {
    this.forceUpdate()
  }

  // 静态方法
  /*
    适用场景(不常用)：
    state 的值在任何时候都取决于 props！！
  */
  static getDerivedStateFromProps(props, state) {
    // 必须返回状态对象
    console.log('Count---getDerivedStateFromProps~~~(新)', props, state)
    return null
    // 一旦返回了状态对象, 则状态以这里返回的为主, 并且不会再更新了
    /*
    return {
      count: 100
    }*/
    // return props
  }

  shouldComponentUpdate() {
    console.log('Count---shouldComponentUpdate~~~(新)')
    return true
  }

  render() {
    console.log('Count---render~~~(新)');
    const { count } = this.state
    return (
      <div>
        <img src="assets/image/react生命周期(新).png" alt="" />
        <h2>当前求和为：{count}</h2>
        <button onClick={this.add}>点我+1</button>
        <button onClick={this.death}>卸载组件</button>
        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
      </div>
    )
  }

  getSnapshotBeforeUpdate() {
    console.log('Count---getSnapshotBeforeUpdate~~~(新)')
    // 必须返回快照值(旧的状态)
    // 在最近一次渲染输出之前调用, 将会传给DidUpdate
    return '快照'
  }

  componentDidMount() {
    console.log('Count---componentDidMount~~~(新)')
  }

  componentDidUpdate(preProps, preState) {
    console.log('Count---componentDidUpdate~~~(新)', preProps, preState)
  }

  componentWillUnmount() {
    console.log('Count---componentWillUnmount~~~(新)')
  }
}

// 快照使用场景——实例
// 新闻列表滚动场景, 需要获取之前的高度以悬停页面
export class NewsList extends Component {

  state = {
    newsArr: []
  }

  listRef = React.createRef()

  componentDidMount() {
    setInterval(() => {
      //获取原状态
      const { newsArr } = this.state
      //模拟一条新闻
      const news = '新闻' + (newsArr.length + 1)
      //更新状态
      this.setState({
        newsArr: [news, ...newsArr]
      })
    }, 1000);
  }

  getSnapshotBeforeUpdate() {
    // console.log(this.listRef.current.scrollHeight)
    return this.listRef.current.scrollHeight
  }

  componentDidUpdate(preProps, preState, height) {
    this.listRef.current.scrollTop += this.listRef.current.scrollHeight - height
  }

  render() {
    return (
      <div className="list" ref={this.listRef}>
        {
          this.state.newsArr.map((n, index) => {
            return <div key={index} className="news">{n}</div>
          })
        }
      </div>
    )
  }
}
